<template>
	<view :style="{paddingTop:`${$safeh}px `}">
		<view class="logintop  ">
			<image src="../../static/logo.png" mode=""></image>
			<view class="wel u-m-t-30">
				欢迎登录小e智慧教学助手系统
			</view>
		</view>
		<u-tabs :list="list1" :scrollable='false' :current='current' v-if="!isfroget" :activeStyle='activeStyle'
			:inactiveStyle='inactiveStyle' @click="click"></u-tabs>
		<view class="uinput">
			<u--input placeholder="请输入手机号" class="uinput" border="surround" v-model="phone"></u--input>
		</view>
		<view class="uinput" v-if="!isfroget">
			<u--input password placeholder="请输入密码" class="uinput" border="surround" v-model="password"></u--input>
		</view>
		<view class="uinput" v-if="!isfroget&&current==1">
			<u--input placeholder="请输入昵称" class="uinput" border="surround" v-model="nickname"></u--input>
		</view>
		<view class="uinput" v-if="!isfroget&&current==1">
			<u--input placeholder="请输入邮箱" class="uinput" border="surround" v-model="email"></u--input>
		</view>
		<!-- <view class="uinput" v-if="!isfroget&&current==1">

			<uni-data-select v-model="schoolvalue" placeholder="请选择" :localdata="range"
				@change="change"></uni-data-select>

		</view> -->
		<view class="uinput" v-if="isfroget">
			<u-input placeholder="请输入邮箱" class="uinput" border="surround" v-model="email">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
				</template>
			</u-input>
		</view>
		<!-- <view class="uinput" v-if="isfroget">
			<u-input  placeholder="请输入验证码" class="uinput" border="surround" v-model="code">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips"  type="primary" size="mini"></u-button>
				</template>
			</u-input>
		</view> -->
		<view class=" u-m-lr-40 " @click="isfroget = true" v-if="!isfroget&& current==0 ">
			忘记密码？
		</view>
		<view class=" u-m-lr-40 " @click="isfroget = false " v-if="isfroget&& current==0 ">
			去登录
		</view>
		<!-- <u-radio-group v-if="current==1" shape='square' v-model="value" iconPlacement="left">
			<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
				:label="item.name" :name="index" @change="radioChange" activeColor='#49A6FF'>
			</u-radio>

		</u-radio-group> -->
		<view @click="tochange" class="dl" v-if="current==0&& isfroget">
			<text>下一步</text>
		</view>
		<view @click="tologin" class="dl" v-if="current==0&&!isfroget">
			<text>登 录</text>
		</view>

		<view @click="register" class="dl" v-if="current==1&&!isfroget">
			<text>注 册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				schoolvalue: '',
				range: [],
				tips: '',
				value: '',
				email: '',
				code: '',
				isfroget: false,
				radiolist1: [{
						name: '专家',
						isabled: false
					},
					{
						name: '教师',
						isabled: false
					}
				],
				value: 0,
				nickname: '',
				current: 0,
				phone: '',
				password: '',
				school: '',
				schoolid: '',
				activeStyle: {
					fontSize: '20px',
					color: '#1972DF'
				},
				inactiveStyle: {
					fontSize: '20px'
				},
				list1: [{
					name: '登录',
				}, {
					name: '注册',
				}, ]
			};
		},
		onLoad() {
			console.log(this.$safeh, '111zzz');
			if (uni.getStorageSync('pwd')) {
				this.password = uni.getStorageSync('pwd')
				this.phone = uni.getStorageSync('phone')
			}
			this.getschool()
		},
		methods: {
			// 获取学校列表
			getschool() {
				this.$api.get('/assistant/xSchool/listAllSchool', {}).then(res => {
					
					res.data.map(item => {
						return item.value = item.id, item.text = item.name
					})
					this.range = res.data
				})
			},
			change(e) {
				this.schoolid = e
			},
			codeChange(text) {
				this.tips = text;
			},
			tochange() {
				uni.navigateTo({
					url: '/pages/changepwd/changepwd'
				})
			},
			getCode() {
				if (!this.email) {
					return this.$toast('请输入邮箱')
				}
				if (!this.phone) {
					return this.$toast('请输入手机号')
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.get('/verification/sendCode', {
						email: this.email,
						phone: this.phone
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 1000);
					}).catch(err => {
						uni.hideLoading()
						this.$toast(res.message)
					})

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

			click(item) {
				this.current = item.index
			},
			radioChange(e) {
				this.value = e
				console.log(this.value);
			},
			register() {
				var regPhone = /^1[3456789]{1}\d{9}$/; //手机正则
				// if (!regPhone.test(this.phone)) {
				// 	this.$toast('手机号错误！')
				// 	return
				// }
				this.$api.post('/user/visit/register', {
					password: this.password,
					phone: this.phone,
					role: this.value + 1,
					schoolId:this.schoolid,
					nickName:this.nickname,
					email:this.email
				}).then(res => {
					this.$toast(res.message)
					console.log(res.data);
					this.current = 0
				}).catch(res => {
					this.$toast(res.message)
				})
			},
			tologin() {
				var regPhone = /^1[3456789]{1}\d{9}$/; //手机正则
				if (!regPhone.test(this.phone)) {
					this.$toast('手机号错误！')
					return
				}
				this.$api.post('/user/visit/login', {
					password: this.password,
					phone: this.phone
				}).then(res => {
					this.$toast(res.message)
					console.log(res.data);
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('tokenHead', res.data.tokenHead)
					uni.setStorageSync('role', res.data.role)
					uni.setStorageSync('pwd', this.password)
					uni.setStorageSync('phone', this.phone)
					if (res.data.role == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/expert/index/index'
							})
						}, 1000)
					} else if (res.data.role == 2) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pagesT/index/index'
							})
						}, 1000)
					} else {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 1000)
					}

				}).catch(err => {
					this.$toast(err.message)
				}).finally(res => {
					console.log(res);
				})

			},
		}
	}
</script>

<style lang="scss">
	.logintop {
		background-color: #1972DF;
		color: #fff;
		padding: 150rpx 100rpx 80rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.wel {
			font-size: 34rpx;
		}
	}

	.uinput {
		width: 686rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
	}

	.u-radio-group--row {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.dl {
		background-color: $main-color;
		width: 686rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #fff;
		text-align: center;
		margin: 100rpx auto;
		box-sizing: border-box;
	}
</style>